import React from 'react';
import { Form, Input, TreeSelect, Checkbox, InputNumber } from 'antd';
import { ruleP, nameMaxLength,nameMinLength, remarkMaxLength } from '@/utils/rule';
import { connect } from 'dva';

// const checkOptions = [
//   { label: '水印', value: 'watermark' },
//   { label: '金库', value: 'treasury' },
//   { label: '加密', value: 'encrypt' },
//   { label: '脱敏', value: 'Desensitive' },
// ];

@Form.create({ name: 'BasicInformation' })
@connect(
  state => ({
    loadingqueryTreeList: state.loading.effects['dataLevel/queryTreeList'],
    dataqueryTreeList: state.dataLevel.dataqueryTreeList,
  }),
  dispatch => ({
    queryTreeList: e => dispatch({ type: 'dataLevel/queryTreeList', payload: e }),
  })
)
export default class BasicInformation extends React.Component {
  static defaultProps = { text: {} };
  componentDidMount() {
    this.props.getInstance(this);
    this.props.queryTreeList();
  }
  render() {
    return (
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        <Form.Item label="级别名称">
          {this.props.form.getFieldDecorator('name', {
            rules: [
              { required: true, whitespace: true, message: '级别名称不能为空' },
              { min: nameMinLength()[0], message: nameMinLength()[1] },
              { max: nameMaxLength()[0], message: nameMaxLength()[1] },              
            ],
            initialValue: this.props.text.name,
          })(<Input placeholder="请输入" allowClear />)}
        </Form.Item>
        <Form.Item label="级别">
          {this.props.form.getFieldDecorator('level', {
            rules: [{ required: true, message: '级别不能为空' }],
            initialValue: this.props.text.level,
          })(
            <InputNumber
              style={{ width: '100%' }}
              min={1}
              max={99}
              precision={0}
              placeholder="请输入数字1-99"
              allowClear
            />
          )}
        </Form.Item>
        <Form.Item label="数据类别">
          {this.props.form.getFieldDecorator('typeIds', {
            rules: [
              { required: true, message: '类别代码不能为空' },
              { pattern: new RegExp(ruleP(1)[0], 'g'), message: ruleP(1)[1] },            
            ],
            initialValue: this.props.text.boundIds && this.props.text.boundIds.split(','),
          })(
            <TreeSelect
              showSearch
              multiple
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              showCheckedStrategy="SHOW_PARENT"
              searchPlaceholder="请选择"
              treeCheckable={true}             
              allowClear
              loading={this.props.loadingqueryTreeList}
            >
              {loopTree(this.props.dataqueryTreeList)}
            </TreeSelect>
          )}
        </Form.Item>

        {/* <Form.Item label="保护措施">
          {this.props.form.getFieldDecorator('measures')(
            <Checkbox.Group options={checkOptions} initialValue={(text && text.measures) || ''} />
          )}
        </Form.Item> */}

        <Form.Item label="备注">
          {this.props.form.getFieldDecorator('remark', {
            rules: [{ max: remarkMaxLength()[0], message: remarkMaxLength()[1] }],
            initialValue: this.props.text.remark,
          })(<Input.TextArea style={{ minHeight: 32 }} rows={2} />)}
        </Form.Item>
      </Form>
    );
  }
}

const loopTree = data => {
  return data.map(item => {
    if (item.children) {
      return (
        <TreeSelect.TreeNode key={item.typeId} value={item.typeId} title={`${item.typeCode}${item.typeName}`}>
          {loopTree(item.children)}
        </TreeSelect.TreeNode>
      );
    }
    return <TreeSelect.TreeNode key={item.typeId} value={item.typeId} title={`${item.typeCode}${item.typeName}`} />;
  });
};
